<!DOCTYPE html>
<html>

  <head>
    <meta charset='utf-8' />
    <meta http-equiv="X-UA-Compatible" content="chrome=1" />
    <meta name="description" content="Me : all about me" />

    <link rel="stylesheet" type="text/css" media="screen" href="/css/stylesheet.css">

    <title>jPaginator - Remylab</title>
    
    <link href="jPaginator.css" rel="stylesheet" type="text/css" />
    <link href="test1.css" rel="stylesheet" type="text/css" />
    
    <!--[if lt IE 9]><script type="text/javascript" src="/js/css3-mediaqueries.js"></script><![endif]-->
    <script type="text/javascript" src="/js/jquery-1.5.1.min.js"></script>
    <script type="text/javascript" src="/js/jquery-ui-1.8.13.slider.min.js"></script>
    <script type="text/javascript" src="jPaginator-min.js"></script>
    
    <script type="text/javascript">
      function isNumeric(value) {
        if (value == null || !value.toString().match(/^[-]?\d*\.?\d*$/)) return false;
        return true;
      }
      // Initial call
      $(document).ready(function(){
      	$("#test1").jPaginator({
            nbPages:54,
            selectedPage:22, 
            overBtnLeft:'#test1_o_left',
            overBtnRight:'#test1_o_right',
            maxBtnLeft:'#test1_m_left',
            maxBtnRight:'#test1_m_right',
            minSlidesForSlider:5,
            onPageClicked: function(a,num) {
                $("#page1").html("demo1 - page : "+num);
            }
      	});
      
      	$("#test2").jPaginator({
            nbPages:42,
            selectedPage:23,
            nbVisible:6,
            marginPx:4,
            overBtnLeft:'#test2_o_left',
            overBtnRight:'#test2_o_right',
            maxBtnLeft:'#test2_m_left',
            maxBtnRight:'#test2_m_right',
            withAcceleration:false,
            minSlidesForSlider:10,
            onPageClicked: function(a,num) {
                $("#page2").html("demo2 - page : "+num);
            }
      	});
      
      	$("#test3").jPaginator({
            nbPages:9999,
            widthPx:36,  
            nbVisible:8,
            overBtnLeft:'#test3_o_left',
            overBtnRight:'#test3_o_right',
            maxBtnLeft:'#test3_m_left',
            maxBtnRight:'#test3_m_right',
        		coeffAcceleration:5,
            onPageClicked: function(a,num) {
                $("#page3").html("demo3 - page : "+num);
            }
      	});
      
        // code for the reset button
        $("#resetdemo1").click(function(){
            if ( !isNumeric($("#nbpages1").val()) ) return;
            
            $("#test1").trigger("reset",{
                selectedPage:null,
                nbVisible:6,
                nbPages:$("#nbpages1").val(),
                marginPx:8,
                speed:1
            });
            $("#page1").html("demo1");
        });
      
      });    
    </script> 
    <style type="text/css">
        body {
            background: #9C4869;
        }
        #header_wrap {
          background: #9C4869;  
          background: -moz-linear-gradient(top, #734658, #9C4869);
          background: -webkit-linear-gradient(top, #734658, #9C4869);
          background: -ms-linear-gradient(top, #734658, #9C4869);
          background: -o-linear-gradient(top, #734658, #9C4869);
          background: linear-gradient(top, #734658, #9C4869);
        }
        #footer_wrap {  
          background: #9C4869;
        }
        #main_content_wrap {
            background: #EBDFCA;
        }
        p.small {
            font-size: 14px;
        }
        
        
        .opt {
            font-size: 16px;
            line-height: 1.4;
        }
        .opt div {
            float:left;
            width:100%;
        }
        .opt .left {
            width:38%;
            margin-right:1%;
        }
        .opt .right {
            width:60%;  color:blue;
        }
        
        /* example of css if you use over and max buttons */
        .jPaginatorOver {
            float:left;
            width:30px;
            height:20px;
            background-color:#BCF2D5;
            text-align:center;
            margin:0 2px 0 2px;
        }
        .jPaginatorMax {
            float:left;
            width:30px;
            height:20px;
            background-color:#5FAABC;
            cursor:pointer;
            text-align:center;
        }
    </style>
    
    <script type="text/javascript" src="/js/ga.js"></script>
  </head>

  <body>

    <!-- HEADER -->
    <div id="header_wrap" class="outer">
        <header class="inner">
          <a id="forkme_banner" href="https://github.com/remylab/jpaginator">Fork Me on GitHub</a>

          <h1 id="project_title">jPaginator</h1>
          <h2 id="project_tagline">a jQuery plugin for pagination</h2>

        </header>
    </div>
	
    <!-- MAIN CONTENT -->
    <div id="main_content_wrap" class="outer">

		<nav id="breadcrumb" class="inner">
		    <ul>
		        <li class="first"><a href="/">remylab</a></li>
		        <li>jpaginator</li>
		    </ul>
		</nav>
		
	    <section id="main_content" class="inner">
	       
	        jPaginator is a jQuery plugin for pagination. It's fun, intuitive, it comes with a slider and you can ask for an unlimited number of pages.
	        Use it with a unique element, for more details please have a look at <a href="#codedemo1">the code of demo1</a> and the <a href="#options">plugin's options</a>.
	        Don't forget the CSS page "jPaginator.css".
	
	        Dependencies : jQuery 1.3.2+, jQuery UI Slider
	
			<p class='small'>Of course, you can achieve a much better design with some CSS skills, please have a look at <a href="http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/extreme-
			makeover-jpaginator-css3-edition/" target="_blank">this tutorial</a> by Ian Yates from 
			<a href="http://webdesign.tutsplus.com/">webdesign.tutsplus.com</a>.</p>
	
	
	        <h3>Demo 1 : custom css</h3>
	
	        <p id="page1">demo1</p>
	        <!-- DEMO 1 -->
	        <div id="test1" >
	
	            <!-- optional left control buttons -->
	            <nav id="test1_m_left"></nav><nav id="test1_o_left"></nav>
	
	            <div class='paginator_p_wrap'>
	                <div class='paginator_p_bloc'>
	                    <!--<a class='paginator_p'></a> // page number : dynamically added -->
	                </div>
	            </div>
	
	            <!-- optional right control buttons -->
	            <nav id="test1_o_right"></nav><nav id="test1_m_right"></nav>
	
	
	            <!-- slider -->
	            <div class='paginator_slider' class='ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all'>
	                <a class='ui-slider-handle ui-state-default ui-corner-all' href='#'></a>
	            </div>
	
	        </div>
	        <input id="nbpages1" type="text" size=1 value="20" maxlength=3/><input id="resetdemo1" type="button" value="Reset options"/> (the slider will disappear
	        because the reset set nbPages to 20, nbVisible to 6, which mean 20/6 = 4 slides, or minSlidesForSlider = 5...)
	        
	        <br/>
	        <h3>Demo 2 : constant speed, no slide</h3>
	        
	        <p id="page2">demo2</p>
	        <!-- DEMO 2 -->
	        <div id="test2" style="position:relative;overflow:hidden;">
	
	            <!-- optional left control buttons-->
	            <nav id="test2_m_left" class="jPaginatorMax"></nav><nav id="test2_o_left" class="jPaginatorOver"></nav>
	
	            <div class='paginator_p_wrap'>
	                <div class='paginator_p_bloc'>
	                    <!--<a class='paginator_p'></a> // page number : dynamically added -->
	                </div>
	            </div>
	
	            <!-- optional right control buttons-->
	            <nav id="test2_o_right" class="jPaginatorOver"></nav><nav id="test2_m_right" class="jPaginatorMax"></nav>
	
	
	            <!-- slider -->
	            <div class='paginator_slider' class='ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all'>
	                <a class='ui-slider-handle ui-state-default ui-corner-all' href='#' ></a>
	            </div>
	
	        </div>
	        
	        <br/>
	        <h3>Demo 3 : high number of pages, max acceleration</h3>
	        
	        <p id="page3">demo3</p>
	        <!-- DEMO 3 -->
	        <div id="test3">
	
	            <!-- optional left control buttons-->
	            <nav id="test3_m_left" class="jPaginatorMax"></nav><nav id="test3_o_left" class="jPaginatorOver"></nav>
	
	            <div class='paginator_p_wrap'>
	                <div class='paginator_p_bloc'>
	                    <!--<a class='paginator_p'></a> // page number : dynamically added -->
	                </div>
	            </div>
	
	            <!-- optional right control buttons-->
	            <nav id="test3_o_right" class="jPaginatorOver"></nav><nav id="test3_m_right" class="jPaginatorMax"></nav>
	
	
	            <!-- slider -->
	            <div class='paginator_slider' class='ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all'>
	                <a class='ui-slider-handle ui-state-default ui-corner-all' href='#'></a>
	            </div>
	
	        </div>
	        
	        
	        <br/><br/>
	        
	        <!-- PLUGIN'S OPTIONS-->
	        <a name="options"></a>
	        <h3>Plugin's options (with default values) :</h3>
	        
	        <div style="position:relative;overflow:hidden;line-height:26px;">
	          <div class="opt" style="width:95%;">
	              <div><div class="left">selectedPage: null,       </div><div class="right">Current page</div></div>
	              <div><div class="left">nbPages: 100,             </div><div class="right">Total number of pages</div></div>
	              <div><div class="left">nbVisible: 10,            </div><div class="right">Number of pages by slide</div></div>
	              <div><div class="left">widthPx: 30,              </div><div class="right">Page-number width (px)</div></div>
	              <div><div class="left">marginPx: 1,              </div><div class="right">Page-number margin (px)</div></div>
	              <div><div class="left">overBtnLeft: null,        </div><div class="right">Element id of the over button left (move forward on mouseover)</div></div>
	              <div><div class="left">overBtnRight: null,       </div><div class="right">Element id of the over button right (move backward on mouseover)</div></div>
	              <div><div class="left">maxBtnLeft: null,         </div><div class="right">Element id of the max button left (go to first slide on click)</div></div>
	              <div><div class="left">maxBtnRight: null,        </div><div class="right">Element id of the max button right (go to last slide on click)</div></div>
	              <div><div class="left">withSlider: true,         </div><div class="right">Display slider (true/false),</div></div>
	              <div><div class="left">withAcceleration: true,   </div><div class="right">Enable acceleration (true/false)</div></div>
	              <div><div class="left">speed: 2,                 </div><div class="right">Animation speed (1 to 5)</div></div>
	              <div><div class="left">coeffAcceleration: 2,     </div><div class="right">Acceleration speed (1 to 5)</div></div>
	              <div><div class="left">minSlidesForSlider: 3,    </div><div class="right">Minimum number of slides to display the slider. Ex : if nbPages=32 and nbVisible=10, 32/10  = 4 slides,
	              so if <i>minSlidesForSlider</i> = 5 then slider won't be displayed.</div></div> 
	              <div><div class="left">onPageClicked: function(a,num) {}  </div><div class="right">Function called when a page number is clicked (where a = the root element of the paginator)</div></div>
	          </div>
	        </div>
	        
	        <a name="codedemo1"><h3>Code of demo1</h3></a>
	        <h5>The Javascript :</h5>
	<pre>
	$(<span style=' color: Maroon;'>"#test1"</span>).jPaginator({ 
	    nbPages:<span style=' color: Maroon;'>54</span>, 
	    selectedPage:<span style=' color: Maroon;'>22</span>,
	    overBtnLeft:<span style=' color: Maroon;'>'#test1_o_left'</span>, 
	    overBtnRight:<span style=' color: Maroon;'>'#test1_o_right'</span>, 
	    maxBtnLeft:<span style=' color: Maroon;'>'#test1_m_left'</span>, 
	    maxBtnRight:<span style=' color: Maroon;'>'#test1_m_right'</span>,
	    minSlidesForSlider:<span style=' color: Maroon;'>5</span>, 
	    onPageClicked: <span style=' color: Blue;'>function</span>(a,num) { 
	        $(<span style=' color: Maroon;'>"#page1"</span>).html(<span style=' color: Maroon;'>"demo1 - page : "</span>+num); 
	    }
	});  
	
	<span style=' color: Green;'>// code for the reset button</span> 
	$(<span style=' color: Maroon;'>"#resetdemo1"</span>).click(<span style=' color: Blue;'>function</span>(){ 
	    <span style=' color: Blue;'>if</span> ( !isNumeric($(<span style=' color: Maroon;'>"#nbpages1"</span>).val()) ) <span style=' color: Blue;'>return</span>; 
	     
	    $(<span style=' color: Maroon;'>"#test1"</span>).trigger(<span style=' color: Maroon;'>"reset"</span>,{  
	        selectedPage:<span style=' color: Maroon;'>null</span>, 
	        nbVisible:<span style=' color: Maroon;'>6</span>, 
	        nbPages:$(<span style=' color: Maroon;'>"#nbpages1"</span>).val(),
	        marginPx:<span style=' color: Maroon;'>8</span>, 
	        speed:<span style=' color: Maroon;'>1</span> 
	    }); 
	});</pre>
	            
	        <h5>The HTML :</h5>
	<pre>
	&lt;div id=<span style=' color: Maroon;'>"test1"</span>&gt; 
	
	    <span style=' color: Green;'>&lt;!-- optional left control buttons --&gt;</span> 
	    &lt;nav id=<span style=' color: Maroon;'>"test1_m_left"</span>&gt;&lt;/nav&gt;&lt;nav id=<span style=' color: Maroon;'>"test1_o_left"</span>&gt;&lt;/nav&gt; 
	
	    &lt;div <span style=' color: Blue;'>class</span>='paginator_p_wrap'&gt; 
	        &lt;div <span style=' color: Blue;'>class</span>='paginator_p_bloc'&gt; 
	            <span style=' color: Green;'>&lt;!--&lt;a class='paginator_p'&gt;&lt;/a&gt; // page number : dynamically added --&gt;</span> 
	        &lt;/div&gt; 
	    &lt;/div&gt; 
	
	    <span style=' color: Green;'>&lt;!-- optional right control buttons --&gt;</span> 
	    &lt;nav id=<span style=' color: Maroon;'>"test1_o_right"</span>&gt;&lt;/nav&gt;&lt;nav id=<span style=' color: Maroon;'>"test1_m_right"</span>&gt;&lt;/nav&gt; 
	
	
	    <span style=' color: Green;'>&lt;!-- slider --&gt;</span> 
	    &lt;div <span style=' color: Blue;'>class</span>='paginator_slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all'&gt; 
	        &lt;a <span style=' color: Blue;'>class</span>='ui-slider-handle ui-state-<span style=' color: Blue;'>default</span> ui-corner-all' href=<span style=' color: Maroon;'>'#'</span>&gt;&lt;/a&gt; 
	    &lt;/div&gt; 
	
	&lt;/div&gt;</pre>
	    </section>
	    
    </div>
    
    
    <!-- FOOTER  -->
    <div id="footer_wrap" class="outer">
      <footer class="inner">
        <p class="copyright">Maintained by <a href="https://github.com/remylab">Rémy Elazare</a>
        <p>Published with <a href="http://pages.github.com">GitHub Pages</a></p>
      </footer>
    </div>

    

  </body>
</html>
